<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星痕共鸣悬浮窗</title>
    <link rel="stylesheet" href="overlay.css">
</head>
<body>
    <div id="titleBar" class="title-bar">
        <div class="title">小红猫DPS统计器</div>
        <div class="controls">
            <button id="clearBtn" class="control-btn" title="清空DPS统计">清空</button>
            <button id="lockBtn" class="control-btn" title="锁定位置">锁定</button>
            <button id="allBtn" class="control-btn" title="查看全部玩家">👥全部玩家DPS</button>
            <div class="control-dropdown">
                <button id="controlBtn" class="control-btn dropdown-btn" title="排序方式">排序</button>
                <div id="controlMenu" class="dropdown-menu">
                    <div class="dropdown-section">
                        <div class="dropdown-header">排序方式</div>
                        <div class="dropdown-options">
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="damage" checked>
                                <span>总伤害</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="healing">
                                <span>总治疗</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="radio" name="sortBy" value="taken">
                                <span>总承伤</span>
                            </label>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-section">
                        <div class="dropdown-header">显示模式</div>
                        <div class="dropdown-options">
                            <label class="dropdown-option">
                                <input type="checkbox" id="showDamageDropdown" checked>
                                <span>显示伤害</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="checkbox" id="showHealingDropdown" checked>
                                <span>显示治疗</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="checkbox" id="showTakenDropdown" checked>
                                <span>显示承伤</span>
                            </label>
                            <label class="dropdown-option">
                                <input type="checkbox" id="showProfessionDropdown" checked>
                                <span>显示职业</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <button id="timerBtn" class="control-btn" title="计时器">计时器</button>
            <button id="settingsBtn" class="control-btn" title="设置">⚙️</button>
            <button id="minimizeBtn" class="control-btn" title="最小化">➖</button>
            <button id="closeBtn" class="control-btn close" title="关闭">✖️</button>
           
        </div>
    </div>
    
    <div id="content" class="content">
        <!-- 总览柱状图 -->
        <div id="overviewPanel" class="overview-panel">
            <div class="overview-title"></div>
            <div class="overview-bars">
                <div class="overview-row">
                    <span class="overview-label">总伤害</span>
                    <div class="overview-bar"><div class="overview-fill damage" style="width:0%"></div></div>
                    <span class="overview-value" id="overviewDamage">0</span>
                </div>
                    <div class="overview-row">
                        <span class="overview-label">总治疗</span>
                        <div class="overview-bar"><div class="overview-fill healing" style="width:0%"></div></div>
                        <span class="overview-value" id="overviewHealing">0</span>
                    </div>
                    <div class="overview-row">
                        <span class="overview-label">总承伤</span>
                        <div class="overview-bar"><div class="overview-fill taken" style="width:0%"></div></div>
                        <span class="overview-value" id="overviewTaken">0</span>
                    </div>
            </div>
        </div>
        
        <div id="mainView" class="main-view">
            <div id="damageList" class="damage-list">
                <div class="loading">🔄 连接服务器中...</div>
            </div>
        </div>
        
        <div id="skillView" class="skill-view hidden">
            <div class="skill-header">
                <button id="backBtn" class="back-btn">← 返回</button>
                <div class="skill-player-info">
                    <div class="player-name-section">
                        <span id="skillPlayerName" class="skill-player-name">玩家名称</span>
                        <button id="editNicknameBtn" class="edit-nickname-btn" title="编辑昵称">✏️</button>
                    </div>
                    <span id="skillPlayerProfession" class="skill-player-profession">职业</span>
                </div>
            </div>
            <div id="skillDetailsList" class="skill-details-list">
                <!-- 技能详细信息 -->
            </div>
        </div>
        
        <!-- 昵称编辑弹窗 -->
        <div id="nicknameEditModal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>🏷️ 设置玩家昵称</h3>
                    <button id="closeNicknameModal" class="close-modal">✖️</button>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <label for="nicknameInput">玩家昵称:</label>
                        <input type="text" id="nicknameInput" placeholder="输入自定义昵称" maxlength="20">
                    </div>
                    <div class="player-uid-info">
                        <span>玩家ID: </span>
                        <span id="editingPlayerUid">-</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="saveNicknameBtn" class="save-btn">💾 保存</button>
                    <button id="cancelNicknameBtn" class="cancel-btn">❌ 取消</button>
                </div>
            </div>
        </div>
        
        <!-- 昵称管理弹窗 -->
        <div id="nicknameManagerModal" class="modal hidden">
            <div class="modal-content nickname-manager">
                <div class="modal-header">
                    <h3>🏷️ 昵称管理</h3>
                    <button id="closeNicknameManager" class="close-modal">✖️</button>
                </div>
                <div class="modal-body">
                    <div class="nickname-search">
                        <input type="text" id="nicknameSearch" placeholder="🔍 搜索玩家ID或昵称...">
                    </div>
                    <div class="nickname-list-container">
                        <div id="nicknamesList" class="nicknames-list">
                            <div class="loading">🔄 加载昵称数据中...</div>
                        </div>
                    </div>
                    <div class="nickname-actions">
                        <button id="addNicknameBtn" class="add-btn">➕ 添加新昵称</button>
                        <button id="refreshNicknamesBtn" class="refresh-btn">🔄 刷新</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 设置面板 -->
    <div id="settingsPanel" class="settings-panel hidden">
        <div class="settings-header">
            <h3>⚙️ 设置</h3>
            <button id="closeSettings" class="close-settings">✖️</button>
        </div>
        
        <div class="settings-content">
            <div class="setting-group">
                <label for="opacitySlider">透明度:</label>
                <input type="range" id="opacitySlider" min="0.6" max="1" step="0.05" value="0.9">
                <span id="opacityValue">90%</span>
            </div>
            
            <div class="setting-group">
                <label for="widthInput">宽度:</label>
                <input type="number" id="widthInput" min="300" max="800" value="400">
                <span>px</span>
            </div>
            
            <div class="setting-group">
                <label for="heightInput">高度:</label>
                <input type="number" id="heightInput" min="200" max="1000" value="600">
                <span>px</span>
            </div>
            
            <div class="setting-group">
                <label for="alwaysOnTopCheck">置顶显示:</label>
                <input type="checkbox" id="alwaysOnTopCheck" checked>
            </div>
            
            <div class="setting-group">
                <label for="refreshInterval">刷新间隔:</label>
                <select id="refreshInterval">
                    <option value="1000">1秒</option>
                    <option value="2000" selected>2秒</option>
                    <option value="3000">3秒</option>
                    <option value="5000">5秒</option>
                </select>
            </div>
            
            <div class="setting-group">
                <button id="resetPosition" class="reset-btn">🏠 重置位置</button>
            </div>
            
            <div class="setting-group">
                                    <button id="manageNicknames" class="manage-btn">🏷️ 管理昵称</button>
            </div>

            <div class="setting-group">
                <label for="fontSizeInput">字体大小:</label>
                <input type="number" id="fontSizeInput" min="10" max="20" value="12">
                <span>px</span>
            </div>

            <div class="setting-group">
                <label for="themeColorInput">主题颜色:</label>
                <input type="color" id="themeColorInput" value="#e7ae97">
            </div>

            <div class="setting-group">
                <label for="compactModeCheck">紧凑模式:</label>
                <input type="checkbox" id="compactModeCheck">
            </div>

            <div class="setting-group">
                <label>主题:</label>
                <label><input type="radio" name="themeMode" value="dark" checked> 深色</label>
                <label><input type="radio" name="themeMode" value="light"> 浅色</label>
            </div>
        </div>
    </div>
    
    <!-- 计时器面板 -->
    <div id="timerPanel" class="timer-panel hidden">
        <div class="timer-header">
            <h3>⏱️ 计时器</h3>
            <button id="closeTimer" class="close-timer">✖️</button>
        </div>
        
        <div class="timer-content">
            <div id="timerStatus" class="timer-status">
                <div class="timer-display">
                    <span id="timerText">00:00</span>
                </div>
                <div class="timer-mode" id="timerMode">就绪</div>
            </div>
            
            <div class="timer-controls">
                <div class="timer-presets">
                    <h4>快速设置:</h4>
                    <button class="timer-preset" data-time="60">60秒</button>
                    <button class="timer-preset" data-time="90">90秒</button>
                    <button class="timer-preset" data-time="120">120秒</button>
                </div>
                
                <div class="timer-custom">
                    <h4>自定义时间:</h4>
                    <input type="number" id="customTime" min="10" max="600" value="60" placeholder="秒">
                    <button id="customStartBtn">开始</button>
                </div>
                
                <div class="timer-actions">
                    <button id="startTimerBtn" class="timer-btn start" disabled>开始计时</button>
                    <button id="stopTimerBtn" class="timer-btn stop" disabled>停止计时</button>
                    <button id="resetTimerBtn" class="timer-btn reset">重置数据</button>
                    <button id="exitTimerBtn" class="timer-btn exit">退出计时模式</button>
                </div>
            </div>
            
            <div class="timer-info">
                <div class="info-item">
                    <span class="info-label">计时状态:</span>
                    <span id="timerStatusText" class="info-value">未开始</span>
                </div>
                <div class="info-item">
                    <span class="info-label">抓包状态:</span>
                    <span id="captureStatusText" class="info-value">正常</span>
                </div>
            </div>
        </div>
    </div>
    

    
    <script src="renderer_simple.js"></script>
</body>
</html>
